@include b(extend-action-timeline) {
  padding-top: 30px;
  background-color: getCssVar('bg-color', 'overlay');

  @include b(extend-action-timeline-task) {
    position: relative;
    width: calc(100% - 52px);
    margin-left: 52px;
    @include e(top) {
      @include flex;

      padding-left: 35px;
      margin-bottom: 16px;
    }
    @include e(bottom) {
      min-height: 50px;
      padding-bottom: 20px;
      padding-left: 35px;
    }
    @include e(trigger) {
      position: absolute;
      top: -3px;
      left: 13px;
      font-size: 20px;
      cursor: pointer;
    }
    @include e(last-time) {
      flex: 1;
      padding-right: 16px;
      text-align: right;
      @include e(last-time-text) {
        display: inline-block;
        margin-left: 10px;
        font-size: 14px;
        color: #999;
      }
    }

    @include e(user-task-name) {
      width: 190px;
      margin-right: 35px;
      font-size: 18px;
      font-weight: bold;
      color: #2d8cf0;
    }

    @include e(head) {
      position: absolute;
      top: 3px;
      left: -9px;
      width: 22px;
      height: 22px;
      border: 2px solid #2d8cf0;
      border-radius: 50%;
    }

    @include e(tail) {
      position: absolute;
      top: 22px;
      width: 4px;
      height: calc(100% - 16px);
      background: #e8eaec;
    }

    @include e(author-name) {
      width: 300px;
      overflow: hidden;
      font-size: 18px;
      color: #666;
      text-overflow: ellipsis;
      white-space:nowrap;

      &.is-has-type{
        width: 140px;
      } 
    }

    @include e(type) {
      width: 200px;
      margin-left: 30px;
      font-size: 18px;
      color: #2d8cf0;
    }

    @include e(full-message) {
      font-size: 18px;
      color: #666;
    }

    @include when(wrong) {
      @include e(head) {
        border: 2px solid #ff686a;
      }
      @include e(user-task-name) {
        color: #ff686a;
      }
      @include e(type) {
        color: #ff686a;
      }
    }

    @include when(link) {
      @include e(head) {
        background-color: #fff;
        border: 2px solid #92a1b3;
      }
      @include e(user-task-name) {
        color: #70849d;
      }
    }
    @include when(linkname) {
      .is-link-head{
        background-color: #fff;
        border: 2px solid #92a1b3;
      }

      @include e(user-task-name) {
        &.is-task-link {
          width: 190px;
          margin-right: 35px;
          font-size: 18px;
          font-weight: bold;
          color: #70849d;
        }
      }
      @include e(link-name) {
        width: 300px;
        overflow: hidden;
        font-size: 18px;
        color: #666;
        text-overflow: ellipsis;
        white-space:nowrap;
      }
    }
  }
  .#{bem('extend-action-timeline-task')} {
    &:nth-last-child(1) {
      .#{bem('extend-action-timeline-task','tail')} {
        background-color: transparent;
      }
      .#{bem('extend-action-timeline-task','moreTask')} {
        &:nth-last-child(1) {
          .#{bem('extend-action-timeline-task')} {
            &:not(:last-child) {
              .#{bem('extend-action-timeline-task','tail')} {
                background-color: #e8eaec;
              }
            }
          }
        }
      }
    }
  }
}
